<template>
  <div class="person-wrap" style="overflow:hidden;">
    <div class="content">
      <div @scroll="this.scroll" ref="orderList" class="orderList touchmove_enable">
        <div v-for="user in users" :key="user.id" class="orderItem">
          <div class="ordericon">
            <div class="image" :style="`background-image:url(${user.headimgurl});`"></div>
          </div>
          <div class="orderinfo">
            <div class="">
              {{user.nickname}}
              <span class="small">{{user.score}}分</span>
            </div>
            <div class="small">17600717350</div>
          </div>
        </div>
        <div ref="loading" v-if="loadingShow" class="orderItem" style="text-align:center;border-bottom:none;">加载中，请稍候</div>
        <div ref="loading" v-if="!loadingShow" class="orderItem" style="text-align:center;border-bottom:none;">没有更多数据了~</div>
      </div>
    </div>
  </div>
</template>

<script>
import "./style.css";
import common from "../../../wechat/static/common/common";
import banTouchMove from "../../util/banTouchmove";

const getUsersURL =
  "https://harmonygame.icebartech.com/api/html5/user/rank/findUserRankByPage";

export default {
  data() {
    return {
      users: [],
      pageIndex: 0,
      pageSize: 10,
      loadingShow:true
    };
  },
  mounted() {
    this.init();
    banTouchMove();
  },
  methods: {
    async init() {
      await this.getUsers();
    },
    scroll() {
      let pos = this.$refs.loading.getBoundingClientRect();
      let { bottom } = this.$refs.orderList.getBoundingClientRect();
      let distance = bottom - pos.top;
      if (distance > 0) {
        this.getUsers();
      }
    },
    async getUsers() {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(async () => {
        if (this.getUsersIng) {
          return;
        }
        this.getUsersIng = true;
        if (!this.sessionId) {
          this.sessionId = common.getCookie("sessionId");
        }
        let res = await this.$http.post(
          `${getUsersURL}?sessionId=${this.sessionId}`,
          {
            pageIndex: ++this.pageIndex,
            pageSize: this.pageSize
          },
          { emulateJSON: true }
        );
        if (res.data.data.bussData) {
          let users = res.data.data.bussData;
          if(!users.length){
            this.loadingShow = false
          }
          if (users && users.length) {
            this.users = this.users.concat(users);
          }
        }
        this.getUsersIng = undefined;
      }, 500);
    }
  }
};
</script>

